<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:o;padding:0}
        .nav-top{
            background-color: #fff;
            position: relative;
            height: 40px;
        }
        .nav-left{
            width: 500px;
            height: 40px;
            background-color: #fff;
            position: absolute;
        }
        .nav-right{
            width: 120px;
            height: 40px;
            position: fixed;
            right: 0;
            background-color: #fff;
        }
        .nav-left ul{
            list-style: none;
            overflow: hidden;
        }
        .nav-left ul li{
            float: left;
            margin-left: 20px;
        }
        .nav-left ul li a{
            text-decoration:none;
            color:#000;
        }
        .nav-right ul {
            list-style: none;
            overflow: hidden;
        }
        .nav-right ul li{
            float: left;
            margin-right: 20px;
        }
        .nav-right ul li a{
            text-decoration:none;
            color:#000;
        }
        .nav-right ul button{
            width: 50px;
            height: 25px;
            margin-right: 20px;
            margin-top: 10px;
            background-color: rgb(30, 128, 255);
            outline: none;
        }
        .content{
            width: 600px;
            margin-top: 50px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
        }
        img{
            width: 250px;
            height: 180px;
            display: block;
            margin-right: auto;
            margin-left:auto;
            margin-top: 20px;
                   
        }
        button{
            width: 100px;
            height: 40px;
            background: rgb(13, 116, 250);
            background-size: 30px;
            color: #fff;
            text-indent: 15px;
            background-position-y: center;
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            outline: none;
        }
        .search{
            position: relative;
            width: 600px;
            height: 40px;
            border: 2px solid rgb(13, 116, 250);
            border-radius: 15px;
            overflow: hidden;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 40px;
        }
        input{
            position: absolute;
            left: 0;
            top: 0;
            padding: 0;
            line-height: 40px;
            width: 500px;
            border:none
        }
        .btu{
            background:url(images/照相机\ \(1\).png) no-repeat;
            position: absolute;
            right: 35px;
            top: 0;
            background-position-y: center;
        }
        .a-left{
            text-decoration:none;
            color: #000;
            position: absolute;
            left: 0;
        }
        .a-right{
            text-decoration: none;
            color: rgb(163, 163, 163);
            position: absolute;
            right: 0;
        }
        .one{
            margin-top: 40px;
            overflow: hidden;
            width: 50%;
            float: left;
        }
        .two{
            margin-top: 95px;
        }
        .one ul{
            list-style: none;
            overflow: hidden;
        }
        .one ul li a{
            text-decoration: none;
            color: #000;
            line-height: 30px;
        }
        .one ul li a:hover{
            color: blue;
            cursor: pointer;
        }
        .two ul li a{
            text-decoration: none;
            color: #000;
            line-height: 30px;
        }
        .two ul li a:hover{
            color: blue;
            cursor: pointer;
        }
        .two ul{
            list-style: none;
        }
        .bottom{
            height: 50px;
            background-color: rgb(245, 245, 245);
            /* margin-top: 345px; */
            position: relative;
            bottom: -360px;
        }
        .bottom-left{
            width: 500px;
            position: absolute;
        }
        .bottom-left ul{
            list-style: none;
            overflow: hidden;
        }
        .bottom-left ul li{
            float: left;
            margin-left: 20px;
        }
        .bottom-right{
            width: 500px;
            position: fixed;
            right: 0;
        }
        .bottom-right ul{
            list-style: none;
            overflow: hidden;
        }
        .bottom-right ul li{
            float: left;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="nav-top">
        <div class="nav-left">
            <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">hao123</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">学术</a></li>
                <li><a href="#">更多</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <ul>
                <li><a href="#">设置</a></li>
                <button>登录</button>
            </ul>
        </div>
    </div>
    <div class="content">
        <img src="images/下载.jpeg" alt="">
        <div class="search">
            <input type="text">
            <button>百度一下</button>
            <button class="btu"></button>
        </div>
            <a class="a-left" href="#">百度热榜</a>
            <a class="a-right" href="#">换一换</a>
        <div class="one">
            <ul>
                <li><a href="#">1.外交部回应菅义伟当选日本首相</a></li>
                <li><a href="#">2.瑞丽已完成核酸检测全部为阴性</a></li>
                <li><a href="#">3.山火中美国民众跳湖保命</a></li>
            </ul>
        </div>
        <div class="two">
            <ul>
                <li><a href="#">4.台湾男星黄鸿升去世</a></li>
                <li><a href="#">5.大一新生超一本线118分只报考古</a></li>
                <li><a href="#">6.老奶奶坐公交对着司机的头扫码</a></li>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-left">
            <ul>
                <li>设为首页</li>
                <li>关于百度</li>
                <li>百度营销</li>
            </ul>
        </div>
        <div class="bottom-right">
            <ul>
                <li>@2020Baidu</li>
                <li>京)-经营性-2017-0020</li>
            </ul>
        </div>
    </div>
</body>
</html>